<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        /* .wrapper {
            /* background-color: red; 
        } */

        .wrapper .menu {
            /* width: 100%; */
            height: 30px;
            margin: 0 auto;
            background-color: rgb(51, 51, 51);
        }

        .wrapper .men {
            width: 80%;
            margin: 0 auto;
            color: white;
            line-height: 30px;
        }

        .wrapper .section {
            width: 80%;
            margin: 0 auto;
            position: relative;
        }

        .wrapper .section .content {
            height: 500px;
            margin: 20px auto;
            color: white;
            text-align: center;
            line-height: 500px;
        }
        .wrapper .section .floor{
            /* display: none; */
            cursor: pointer;
            position: fixed;
            right: 0px;
            top: 30%;
        }

        .wrapper .section .floor ul{
            list-style: none;
            /* position: absolute; */
           
        }
        .wrapper .section .floor ul li{
            width: 50px;
            height: 50px;
            background-color:rgb(154,124,255);
            color: white;
            text-align: center;
            line-height: 50px;
            margin-top: 10px;
        }
        .wrapper .section .floor ul .active{
            background-color: red
        }
        .wrapper .last {
            /* width: 100%; */
            height: 70px;
            margin: 0 auto;
            background-color: rgb(244,244,244);
        }

        .wrapper .las {
            width: 80%;
            margin: 0 auto;

            line-height: 70px;
        }
    </style>

    <script src="../js/jquery.js"></script>
    <script>
        $(function(){
            // 遍历填充盒子颜色
            var arr=["orange","pink","skyblue","green","purple","red"];
            $(".wrapper .section .content").each(function(index,item){
                $(this).css("backgroundColor",arr[index])
            })


            var heightarr=[0,530,860,1090,1520,1850,]
            // 移动到特定位置出现楼层出现
            var heightV=500;
            $(window).scroll(function(){
                // console.log( $(window).scrollTop());
                if($(window).scrollTop() >= heightV ){
                    $(".floor").stop().fadeIn();
                }else{
                    $(".floor").stop().fadeOut();
                }
                $.each(heightarr,function(index,item){
                    console.log(index,item);
                    if($(window).scrollTop() >=item){
                        // console.log(index);
                        $(".floor ul li").eq(index).addClass("active").siblings("li").removeClass("active")
                    }
                })
            })

            // 点击切换楼层点击高亮
            $(".floor ul ").on("click","li",function(){
              var index = $(this).index() ;
              $("html").animate({
                  "scrollTop": (index*heightV)+30
              })
              $(this).addClass("active").siblings("li").removeClass("active")
            });

        
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <div class="menu">
            <div class="men">
                <span>这是导航栏</span>
            </div>
        </div>

        <div class="section">
            <div class="content">这是1楼</div>
            <div class="content">这是2楼</div>
            <div class="content">这是3楼</div>
            <div class="content">这是4楼</div>
            <div class="content">这是5楼</div>
            <div class="content">这是6楼</div>
            <div class="floor">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>
        </div>
        <div class="last">
             <div class="las">
            <span>这是底部</span>
        </div>
        </div>
       
    </div>
</body>

</html>